<template>
<div style="height: 1000px;width:1200px;margin: 0 auto" class="Community">
      <el-carousel  indicator-position="outside" height="313px" width="1000px" >
        <el-carousel-item v-for="b in bannerArr">
          <img :src="b.imgUrl"  width="100%">
        </el-carousel-item>
      </el-carousel>
      <el-row>
        <el-col span="18">
          <el-menu router mode="horizontal" active-text-color="orange" default-active="/community/all">
            <el-menu-item index="/community/all">全部游记</el-menu-item>
            <el-menu-item index="/community/hot">热门游记</el-menu-item>
            <el-menu-item index="/community/recent">最新游记</el-menu-item>
            <el-button @click="search()" type="primary" style="float: right;margin-top: 10px;margin-right:30px;background-color: #386582;border-radius: 15px;">搜索</el-button>
            <el-input v-model="textSearch" @keydown.native.enter="search()"
                placeholder="游记/旅行攻略/目的地"
                style="width:250px;float: right;margin:10px 20px 0 0;">
            </el-input>
          </el-menu>
          <div>
            <router-view/>
          </div>
        </el-col>
        <el-col span="6">
          <a href="javascript:void(0)" @click="gotoPost" style="background-color:#386582;display:block;height:40px;width:250px;border-radius: 10px;margin:10px 0 0 16px;
                    text-align: center;line-height: 40px;color:white">快来写游记吧...</a>
          <el-menu>
            <p style="margin-left: 20px;">社区热搜榜</p>
            <p  v-for="(b,index) in contentArr" v-if="index < 9" style="color: #386582;font-weight: bold">
              <i style="color:red;font-weight: bold;margin: 5px 5px 5px 25px;">{{index+1}}: </i>
              <a :href="'/detail?id='+b.id">{{b.title}}</a>
            </p>
          </el-menu>
        </el-col>
      </el-row>
</div>
</template>

<script>
export default {
  name: "Community",
  props:['textSearch'],
  data:function (){
    return{
      bannerArr:[],

      contentArr:[],
    }
  },
  methods: {
    gotoPost(){
      if(localStorage.getItem("id")){
        location.href='/articlePost';
      }else{
        this.$message.error("未登录,请先登录!");
        location.href='/login';
      }
    },
    loadBannerList(){
      //请求所有轮播图数据
      this.axios.create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .get("http://localhost:8080/v1/banners/1").then((response)=> {
        if (response.data.code==1){
          this.bannerArr = response.data.data;
          console.log(response.data.data)
        }
      })
    },
    loadHotList(){
      this.axios
          .create({
            'headers':{
              'Authorization': localStorage.getItem('localJwt')
            }
          })
          .get("http://localhost:8080/v1/contents/hot").then((response)=> {
        if (response.data.code==1){
          this.contentArr = response.data.data;
          this.contentArr.sort(function(a, b) {
            return b.viewCount - a.viewCount; // 根据浏览量进行降序排序
          });
        }
      })
    },
    search(){

      if (this.textSearch.trim()==""){
        this.$message.error("请输入搜索的内容!");
        return;
      }
      let other = this.randomInt;
      if(location.href.includes("textSearch")){
        location.href='/community/search?textSearch='+this.textSearch+"&other="+other;
      }
      location.href='/community/search?textSearch='+this.textSearch+"&other="+other;
    },
  },


  mounted (){
    this.loadBannerList();
    this.loadHotList();

  }
}
</script>

<style scoped>
a{text-decoration: none;font-size: 14px;text-align: center;color: black}
a:link{color:black}
a:hover{color: #386582}
.center{width: 1200px;margin: 0 auto}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
ul{
  list-style-type: none;
  overflow: hidden;/*解决高度为0 导致的异常*/
}
li{
  float: left;
  margin-right: 10px;
}
.el-menu-item{
  margin: 0 35px;
}
.el-avatar--circle{
  vertical-align: bottom;
}
.con{
  margin: 0;
  padding: 0;
  eight: 25px;
  line-height: 25px;
}
li.el-menu-item.con{
  height:30px;
}

</style>